<template>
	<view class="container">
		<!-- 所有内容的容器 -->
	    <view class="information" v-for="item in commentList" >
			<view class="headPortrait">
				<u-avatar :src="item.url"></u-avatar>
			</view>
			<view class="mian">
				<view class="nameView">{{item.name}}</view>
				<view class="commentClass">{{item.contentText}}</view>
				<view class="timeClass">{{item.date}}</view>
			</view>
			<view class="question">
				<u-image :src="src" height="100%" mode="widthFix"></u-image>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#2b85e4" height="45px" bg-color="#f4f4f5" :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '消息',
				tabbar: '',
				//问题图片地址
				src:'',
				userInfo:this.$store.state.user.userInfo,
				//加载语句
				loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
				},
				//加载时的图标类型
				iconType: 'flower',
				//组件状态
				status: 'loadmore',
				commentList: [{
						id: 1,
						name: '叶轻眉',
						date: '12-25 18:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 12,
						likeNum: 33,
						isLike: false,
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '粘粘',
								contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
							}
						]
					},
					{
						id: 2,
						name: '叶轻眉1',
						date: '01-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 11,
						isLike: false,
						url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					},
					{
						id: 3,
						name: '叶轻眉2',
						date: '03-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 21,
						isLike: false,
						allReply: 2,
						
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '豆包',
								contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
							}
						]
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					}
					
					],
			}
		},
		onLoad() {
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
			 */
			this.tabbar = this.$store.state.tabbar.tarbarList;
		},
		methods: {

		}
	}
</script>

<style>
	.information{
		
		width: 100%;
		display: flex;
		border: 0.5rpx solid #C8C9CC;
	}
	
	.headPortrait{
		width: 100rpx;
		padding: 20rpx;
		
	}
	.mian{
		height: 100%;
		width: 400rpx;
		
	}
	.nameView{
		height: 30%;
		font-size:35rpx ;
	}
	
	.commentClass{
		height: 50%;
		font-size:30rpx ;
	}
	
	.image{
		height: 100%;
		width: 100%;
	}
	
	.timeClass{
		height: 20%;
		font-size: 20rpx;
	}	
	.question{
		width: 200rpx;
		padding: 10rpx;
	}
</style>
